//导入node.js自带的核心模块-path处理路径模块
var path = require('path');


//导入mini-css-extract-plugin插件
var MiniCssExtractPlugin = require('mini-css-extract-plugin');

var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

    mode: 'development',

    //配置入口文件
    // entry: './app/app.js'
    // entry: ['./app/app.js', './app/index.js']

    //修改输出js文件名并且分别输出，不会合并到一个js文件
    entry: {
        app3: './app/app.js',
        // app2: './app/index.js'
    },
    //配置出口
    output: {
        path: path.resolve(__dirname, 'public'),


        //指定文件名输出，不允许入口配置使用对线配置多个入口文件
        filename: 'myapp.js'
            // filename: new Date().getTime() + '[name].js'
            // filename: '[name].[hash].js'
    },
    module: {
        //loader所以解析规则
        rules: [{
                //css-loader
                //匹配文件后缀
                test: /\.css$/,
                // use: ['style-loader', 'css-loader']

                //css-loader解析css文件，并且分离css
                // use: [miniCssExtractPlugin.loader, 'css-loader']

                use: [{
                    loader: MiniCssExtractPlugin.loader

                }, {
                    loader: 'css-loader'
                }]
            },
            {
                //less-loader
                test: /\.less$/,

                //less-loader解析less
                // use: ['style-loader', 'css-loader', 'less-loader']

                //less-loader解析less文件，并且将输出的css分离
                // use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
                use: [{
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'less-loader'
                    }
                ]
            }, {
                test: /\.(png|gif|jpeg|jpg|webp)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        esModule: false,
                        limit: 1024 * 10
                    }
                }],

                //模块类型
                type: 'jiavascript/auto'
            },
            {
                test: /\.html?$/,
                use: [{
                    loader: 'html-withimg-loader'
                }]
            }
        ]
    },


    //配置插件 
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'app.css'
        }),
        new HtmlWebpackPlugin({
            template: './app.html',

            inject: 'body',

            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            filename: 'app.min.html'
        })
    ]
}